﻿
<style>
    
    .ui-jqgrid tr.jqgrow td {
        white-space: normal;
    }

</style>

<div class="container">
    
    <div class="row-fluid">
        <h4>People</h4>
    </div>
    
    <div class="row-fluid">
        <div class="span12">
            <a class="btn btn-link" ng-click="createPerson()"><i class="icon-plus-sign"></i> Add Person</a>
        </div>
    </div>
    
    <div class="row-fluid">
        <jq-template-grid>
            <jq-template-grid-column name="personId" width="100" label="Actions" sortable="false" template="rowActionsTemplate" />
            <jq-template-grid-column name="lastName" width="200" label="Last" />
            <jq-template-grid-column name="firstName" width="200" label="First" />
            <jq-template-grid-column name="middleName" width="100" label="Middle" />
            <jq-template-grid-column name="suffix" width="100" label="Suffix" />
            <jq-template-grid-column name="title" width="100" label="Title" />
        </jq-template-grid>
    </div>

</div>

<script type="text/ng-template" id="rowActionsTemplate">
    <span class="btn-group">
        <a class="btn btn-link" ng-click="view()"><i class="icon-eye-open icon-small"></i></a>
        <a class="btn btn-link" ng-click="edit()"><i class="icon-edit icon-small"></i></a>
        <a class="btn btn-link" ng-click="delete()"><i class="icon-trash icon-small"></i></a>
    </span>
</script>
